<template>
  <div class="content">
    <TableList
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
      :linklist="linklist"
      :isCheck="isCheck"
      @Delorder="getOrderInfo"
      @OrderReceived="getOrderInfo"
    />
    <Collect :tableData="tableData" :collect="collect" :money="money" />
    <Footer>
      <template v-slot:choose><div></div></template>
      <template v-slot:paging
        ><Page :total="totalSize" @getLimit="getLimit" @getPage="getPage"
      /></template>
    </Footer>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import TableList from "../../components/List.vue";
import Page from "../../components/Paging.vue";
import Footer from "../../components/Footer.vue";
import Collect from "../../components/collect.vue";
// import { mapActions } from "vuex";
import { CheckCustomerAxios } from "../../http/apis/orderApi/index";
// 时间戳的转换
import { timeFormat } from "../../utils/utils";
export default {
  name: "OrderList",
  components: {
    TableList,
    Page,
    Collect,
    Footer,
  },
  data() {
    return {
      // 判断状态
      state: "",
      // 将点击客户名称id
      customer_id: "",
      // 当前路径
      path: "",
      // 输入框里面的值
      val: "",
      isCheck: false,
      currentPage: 1,
      pageSize: 3,
      totalSize: 0,
      // 订单状态
      stateUrl: "/order/orderstate?state=list",
      // 发货状态
      consigneeUrl: "/order/consignstate?state=list",
      // 表格模拟数据
      tableData: [],
      // 表头数据
      linklist: [],
      // 按钮数据
      btnList: [
        {
          id: 0,
          name: "到款",
          type: "订单",
        },
        // {
        //   id: 1,
        //   name: "打印",
        //   type: "订单",
        // },
        {
          id: 1,
          name: "修改",
          type: "订单",
        },
        {
          id: 2,
          name: "删除",
          type: "订单",
        },
      ],
      // 模拟数据的属性名
      titleList: [
        "customer_name",
        "order_id",
        "contact_name",
        "order_date",
        "Submit_order_date",
        "order_amount",
        "order_received",
        "order_debt",
        "order_status",
        "shipping_status",
        // "consignee",
        // "consignee_phone",
        // "consignee_address",
        "order_remark",
        "employee_name",
        "enter_time",
        "accessory",
        "ordergoods",
      ],
      // 金额
      collect: [
        // '汇总统计','总金额','已收款','欠款'
        { id: 1, name: "汇总统计" },
        { id: 2, name: "总金额" },
        { id: 3, name: "已收款" },
        { id: 4, name: "欠款" },
      ],
      money: [],
    };
  },
  created() {
    // 调用添加路由动态参数
    // this.AddRouterParams();

    //  调用缓存请求
    this.GoWhereRouter();
    // this.sendRequest();
    // this.linklist = [
    //   {
    //     id: 0,
    //     name: "客户名称",
    //     isRouter: true,
    //     url: "/information/clientname",
    //   },
    //   {
    //     id: 1,
    //     name: "订单编号",
    //     isRouter: true,
    //     url: "/order/ordernumber",
    //   },
    //   {
    //     id: 2,
    //     name: "联系人",
    //     isRouter: false,
    //   },
    //   {
    //     id: 3,
    //     name: "下单日期",
    //     isRouter: false,
    //   },
    //   {
    //     id: 4,
    //     name: "交单日期",
    //     isRouter: false,
    //   },
    //   {
    //     id: 5,
    //     name: "订单总金额",
    //     isRouter: false,
    //   },
    //   {
    //     id: 6,
    //     name: "已收款",
    //     isRouter: false,
    //   },
    //   {
    //     id: 7,
    //     name: "欠款",
    //     isRouter: false,
    //   },
    //   {
    //     id: 8,
    //     name: "订单状态",
    //     isRouter: true,
    //     url: this.stateUrl,
    //   },
    //   {
    //     id: 9,
    //     name: "发货状态",
    //     isRouter: true,
    //     url: this.consigneeUrl,
    //   },
    //   {
    //     id: 10,
    //     name: "备注",
    //     isRouter: false,
    //   },
    //   {
    //     id: 11,
    //     name: "业务员",
    //     isRouter: false,
    //   },
    //   {
    //     id: 12,
    //     name: "录入时间",
    //     isRouter: false,
    //   },
    //   {
    //     id: 13,
    //     name: "附件",
    //     isRouter: true,
    //     url: "/order/accessory",
    //   },
    //   {
    //     id: 14,
    //     name: "订单商品",
    //     isRouter: true,
    //     url: "/order/ordergoods",
    //   },
    // ];
    if (this.path == "/information/clientname") {
      this.linklist.splice(0, 1);
    }
  },

  computed: {
    ...mapState(["searchVal"]),
  },
  methods: {
    ...mapActions("orderStore", [
      "getOrderInfoAction",
      "getOrderDayInfoAction",
      "getOrderWeekInfoAction",
      "getOrderMonthInfoAction",
      "SearchOrderAction",
    ]),
    // 设置一个空函数缓存当前去哪个界面
    StrogeMethods() {},
    // 分页
    getLimit(val) {
      this.pageSize = val;
      this.state ? this.sendRequest() : this.StrogeMethods();

      // console.log('this PageSize',this.pageSize);
      // this.money = [];
    },
    // 分页
    getPage(val) {
      this.currentPage = val;
      this.state ? this.sendRequest() : this.StrogeMethods();
      //  console.log('this currentPage',this.currentPage);
      // this.money = [];
    },

    // 计算数据
    compute() {
      this.money = [];
      var order_amount = 0;
      var order_received = 0;
      var order_debt = 0;
      // console.log("this.tableData",this.tableData);
      for (var a = 0; a < this.tableData.length; a++) {
        order_amount += this.tableData[a].order_amount;
        order_received += this.tableData[a].order_received;
        order_debt += this.tableData[a].order_debt;
      }
      this.money.push(order_amount);
      this.money.push(order_received);
      this.money.push(order_debt);
      // console.log(this.money);
    },

    // 将数字改变为文字
    setData() {
      this.tableData = this.tableData.map((item) => {
        if (item.order_status == 1) {
          item.order_status = "已完成";
        }
        if (item.order_status == 2) {
          item.order_status = "处理中";
        }
        if (item.order_status == 3) {
          item.order_status = "未处理";
        }
        if (item.shipping_status == 1) {
          item.shipping_status = "已发货";
        }
        if (item.shipping_status == 2) {
          item.shipping_status = "未发货";
        }
        return item;
      });
    },

    // 判断进入哪个路由
    GoWhereRouter() {
      // 缓存路由
      this.path = this.$route.path;
      console.log("当前路由", this.path);

      if (this.path == "/order/orderlist") {
        //获取客户列表
        this.StrogeMethods = this.getOrderInfo;
        (this.stateUrl = "/order/orderstate?state=list"),
          (this.consigneeUrl = "/order/consignstate?state=list");
      } else if (this.path == "/information/clientname") {
        // 获取点击客户获取客户详细信息
        this.StrogeMethods = this.getCustomerInfo;
        (this.stateUrl = "/order/orderstate?state=clientname"),
          (this.consigneeUrl = "/order/consignstate?state=clientname");
        console.log(this.$route.query.info);
        this.customer_id = this.$route.query.info.customer_Id;
        console.log("点击客户名称的客户id", this.customer_id);
      } else if (this.path == "/order/orderadd-day") {
        this.StrogeMethods = this.getOrderDayInfo;
        (this.stateUrl = "/order/orderstate?state=orderadd-day"),
          (this.consigneeUrl = "/order/consignstate?state=orderadd-day");
        console.log("this.stateUrl", this.stateUrl);
      } else if (this.path == "/order/orderadd-week") {
        this.StrogeMethods = this.getOrderWeekInfo;
        (this.stateUrl = "/order/orderstate?state=orderadd-week"),
          (this.consigneeUrl = "/order/consignstate?state=orderadd-week");
      } else if (this.path == "/order/orderadd-month") {
        this.StrogeMethods = this.getOrderMonthInfo;
        (this.stateUrl = "/order/orderstate?state=orderadd-month"),
          (this.consigneeUrl = "/order/consignstate?state=orderadd-month");
      }
      this.StrogeMethods();

      this.linklist = [
        {
          id: 0,
          name: "客户名称",
          isRouter: true,
          url: "/information/clientname",
        },
        {
          id: 1,
          name: "订单编号",
          isRouter: true,
          url: "/order/ordernumber",
        },
        {
          id: 2,
          name: "联系人",
          isRouter: false,
        },
        {
          id: 3,
          name: "下单日期",
          isRouter: false,
        },
        {
          id: 4,
          name: "交单日期",
          isRouter: false,
        },
        {
          id: 5,
          name: "订单总金额",
          isRouter: false,
        },
        {
          id: 6,
          name: "已收款",
          isRouter: false,
        },
        {
          id: 7,
          name: "欠款",
          isRouter: false,
        },
        {
          id: 8,
          name: "订单状态",
          isRouter: true,
          url: this.stateUrl,
        },
        {
          id: 9,
          name: "发货状态",
          isRouter: true,
          url: this.consigneeUrl,
        },
        {
          id: 10,
          name: "备注",
          isRouter: false,
        },
        {
          id: 11,
          name: "业务员",
          isRouter: false,
        },
        {
          id: 12,
          name: "录入时间",
          isRouter: false,
        },
        {
          id: 13,
          name: "附件",
          isRouter: true,
          url: "/order/accessory",
        },
        {
          id: 14,
          name: "订单商品",
          isRouter: true,
          url: "/order/ordergoods",
        },
      ];
    },

    // 把路由添加参数，用于routerlink跳转到第二个路由的时候知道跳转的是哪一个路由
    // AddRouterParams() {
    //   // 缓存路由
    //   this.path = this.$route.path;
    //   console.log("当前路由", this.path);

    //   if (this.path == "/order/orderlist") {
    //     (this.stateUrl = "/order/orderstate?state=list"),
    //       (this.consigneeUrl = "/order/consignstate?state=list");
    //   } else if (this.path == "/information/clientname") {
    //     (this.stateUrl = "/order/orderstate?state=clientname"),
    //       (this.consigneeUrl = "/order/consignstate?state=clientname");
    //     console.log(this.$route.query.info);
    //     this.customer_id = this.$route.query.info.customer_Id;
    //     console.log("点击客户名称的客户id", this.customer_id);
    //   } else if (this.path == "/order/orderadd-day") {
    //     (this.stateUrl = "/order/orderstate?state=orderadd-day"),
    //       (this.consigneeUrl = "/order/consignstate?state=orderadd-day");
    //   } else if (this.path == "/order/orderadd-week") {
    //     (this.stateUrl = "/order/orderstate?state=orderadd-week"),
    //       (this.consigneeUrl = "/order/consignstate?state=orderadd-week");
    //   } else if (this.path == "/order/orderadd-month") {
    //     (this.stateUrl = "/order/orderstate?state=orderadd-month"),
    //       (this.consigneeUrl = "/order/consignstate?state=orderadd-month");
    //   }
    // },

    // 获取订单列表
    getOrderInfo() {
      this.tableData = [];
      // console.log("this.currentPage",this.currentPage);
      // console.log("this.pageSize",this.pageSize);
      this.getOrderInfoAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((obj) => {
          console.log("获取订单列表处理成功", obj);
          this.totalSize = obj.totalSize;
          this.tableData = obj.dataArr;
          // 将数字改变为文字
          this.setData();
          // 计算
          this.compute();
        })
        .catch((err) => {
          console.log("获取订单列表处理错误", err);
        });
    },

    // 获取今日新增
    getOrderDayInfo() {
      this.tableData = [];
      this.getOrderDayInfoAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((obj) => {
          console.log("获取今日新增订单列表处理成功", obj);
          this.totalSize = obj.totalSize;
          this.tableData = obj.dataArr;
          // 将数字改变为文字
          this.setData();
          // 计算
          console.log("今日新增tableData", this.tableData);
          this.compute();
        })
        .catch((err) => {
          console.log("获取今日新增订单列表处理错误", err);
        });
    },

    // 获取本周新增
    getOrderWeekInfo() {
      this.tableData = [];
      this.getOrderWeekInfoAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((obj) => {
          console.log("获取本周新增订单列表处理成功", obj);
          this.totalSize = obj.totalSize;
          this.tableData = obj.dataArr;
          // 将数字改变为文字
          this.setData();
          // 计算
          this.compute();
        })
        .catch((err) => {
          console.log("获取本周新增订单列表处理错误", err);
        });
    },

    // 获取本月新增
    getOrderMonthInfo() {
      this.tableData = [];
      this.getOrderMonthInfoAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((obj) => {
          console.log("获取本月新增订单列表处理成功", obj);
          this.totalSize = obj.totalSize;
          this.tableData = obj.dataArr;
          // 将数字改变为文字
          this.setData();
          // 计算
          this.compute();
        })
        .catch((err) => {
          console.log("获取本月新增订单列表处理错误", err);
        });
    },

    // 点击客户名称获取客户详细参数
    getCustomerInfo() {
      this.tableData = [];
      console.log(
        "this.currentPage,this.pageSize",
        this.currentPage,
        this.pageSize
      );
      console.log("客户id", this.customer_id);
      CheckCustomerAxios({
        customer_id: this.customer_id,
        currentPage: this.currentPage,
        pageSize: this.pageSize,
      })
        .then((res) => {
          console.log("获取客户详细信息数据请求成功", res.data.data[1]);
          let arr = res.data.data[1];
          this.totalSize = res.data.data[0];
          arr.forEach((item) => {
            let obj = {
              order_id: item.order_id,
              customer_Id: item.customer_Id,
              contact_name: item.contact_name,
              order_date: timeFormat(item.order_date),
              Submit_order_date: timeFormat(item.Submit_order_date),
              order_amount: item.order_amount,
              order_received: item.order_received,
              order_debt: item.order_debt,
              order_status: item.order_status,
              shipping_status: item.shipping_status,
              order_remark: item.order_remark,
              employee_name: item.employee_name,
              enter_time: timeFormat(item.enter_time),
              accessory: "附件详情",
              ordergoods: "商品详情",
            };
            this.tableData.push(obj);
          });
          this.setData();
          this.compute();
          console.log(this.tableData);
        })
        .catch((err) => {
          console.log("获取客户详细信息数据请求成功", err);
        });
    },
    // 搜索请求
    sendRequest(val) {
      this.tableData = [];
      this.SearchOrderAction({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        val: val,
      })
        .then((obj) => {
          this.state = true;
          console.log("搜索处理成功", obj);
          this.totalSize = obj.totalSize;
          this.tableData = obj.dataArr;
          // console.log('搜索',this.tableData);
          // 将数字改变为文字
          this.setData();
          // 计算
          this.compute();
        })
        .catch((err) => {
          console.log("搜索订单列表处理错误", err);
        });
    },
  },

  watch: {
    $route(to) {
      console.log("路由监听", to.path);
      // this.path = to.path;
      console.log(this.stateUrl);
      this.GoWhereRouter();
    },
    searchVal(val) {
      console.log(val);
      if (val == "") {
        alert("搜索不能为空");
        return;
      } else {
        this.sendRequest(val);
      }
    },
  },
};
</script>

<style>
</style>